<!-- <template>
    <a-upload v-model:file-list="fileList" name="avatar" list-type="picture-card" class="avatar-uploader"
        :show-upload-list="false" action="" :before-upload="beforeUpload" @change="handleChange"
        :customRequest="uploadImage">
        <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
        <div v-else>
            <loading-outlined v-if="loading"></loading-outlined>
            <plus-outlined v-else></plus-outlined>
            <div class="ant-upload-text">Upload</div>
        </div>
    </a-upload>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import type { UploadChangeParam, UploadProps } from 'ant-design-vue';
import COS from 'cos-js-sdk-v5'

function getBase64(img: Blob, callback: (base64Url: string) => void) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result as string));
    reader.readAsDataURL(img);
}

const fileList = ref([]);
const loading = ref<boolean>(false);
const imageUrl = ref<string>('');

const handleChange = (info: UploadChangeParam) => {
    if (info.file.status === 'uploading') {
        loading.value = true;
        return;
    }
    if (info.file.status === 'done') {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, (base64Url: string) => {
            imageUrl.value = base64Url;
            loading.value = false;
        });
    }
    if (info.file.status === 'error') {
        loading.value = false;
        message.error('upload error');
    }
};

const beforeUpload = (file: UploadProps['fileList'][number]) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
    if (!isJpgOrPng) {
        message.error('You can only upload JPG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
        message.error('Image must smaller than 2MB!');
    }
    return isJpgOrPng && isLt2M;
};

const uploadImage = (params: any) => {
    console.log(params.file)
    const cos = new COS({
        SecretId: 'AKIDhDVYMvFJ8h27xjGYbOwGLAk5AzZtzpQm',
        SecretKey: '92g5GCsJVS9amjRt64mFSQ8bolTw97qJ'
    }) // 完成cos对象的初始化
    cos.putObject({
        Bucket: 'social-box-user-img-1308629609', // 存储桶名称
        Region: 'ap-guangzhou', // 地域名称
        Key: params.file.name, // 文件名称
        StorageClass: 'STANDARD', // 固定值
        Body: params.file // 文件对象
    }, (err, data) => {
        if (data.statusCode === 200 && data.Location) {
            // 拿到了腾讯云返回的地址
            // 通过input自定义事件将地址传出去
            // this.$emit('input', 'http://' + data.Location) // 将地址返回了
            console.log('http://' + data.Location) // 将地址返回了
            imageUrl.value = 'http://' + data.Location
            loading.value = false
        } else {
            // this.$message.error(err.Message) // 上传失败提示消息
            console.log(err) // 上传失败提示消息
        }
    })
}
</script>
<style scoped>
.avatar-uploader>.ant-upload {
    width: 128px;
    height: 128px;
}

.ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
}
</style>
   -->

<template>
    <div>
        <upload @uploadSuccess="test" />
    </div>
</template>

<script setup lang='ts'>
const test = (e: any) => {
    console.log(e)
}
</script>

<style scoped></style>